<template>
    <app-dialog v-model="show" width="600px" style="top: 3vh" title="激活" @open="handleOpen">

        <el-form class="activation_form" :model="formdata" label-width="150px" ref="ruleFormRef" label-position="right"
            :rules="rules">
            <el-form-item label="转账密码:" prop="pass_word_a">
                <el-input v-model="formdata.pass_word_a" type="password" style="width: 300px" placeholder="转账密码" />
            </el-form-item>
            <el-form-item label="确认密码:" prop="pass_word_b">
                <el-input v-model="formdata.pass_word_b" type="password" style="width: 300px" placeholder="确认密码" />
            </el-form-item>
        </el-form>

        <template #footer>
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" class="hovepcvicecolor" @click="handleSubmit()">确定</el-button>
        </template>
    </app-dialog>
</template>

<script setup>
import http from '@/utils/uc-http'
import { ElMessage } from 'element-plus'
const show = defineModel({ type: Boolean })
const emits = defineEmits(['change'])
const userStore = useUserStore()
const ruleFormRef = ref(null)
const formdata = ref({
    pass_word_a: '',
    pass_word_b: ''
})

const validatePass2 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再次输入转账密码'))
    } else if (value !== formdata.value.pass_word_a) {
        callback(new Error('两次输入的内容不一致'))
    } else {
        callback()
    }
}
const rules = reactive({
    pass_word_a: [{ required: true, message: '请输入转账密码', trigger: 'blur' }],
    pass_word_b: [{ validator: validatePass2, trigger: 'blur' }],
})

const handleOpen = () => {
    formdata.value = {
        pass_word_a: '',
        pass_word_b: ''
    }
}

const handleClose = () => {
    show.value = false
}
const handleSubmit = () => {
    ruleFormRef.value.validate(valid => {
        if (valid) {
            http.post('/active_bank', formdata.value).then((res) => {
                ElMessage.success('激活成功')
                userStore.checkInfo()
                handleClose()

            })

        }
    })
}
</script>

<style lang="scss" scoped></style>

<style>
.activation_form .el-input__wrapper {
    border-radius: 0;
}
</style>